<template>
  <div class="app-container">
    <el-row style="text-align: center;">
      <el-col>
        <span
          style="display: inline-block; height: 50px; line-height: 50px; vertical-align: middle; margin-left: 10px; font-size: 28px;font-weight: bold;">
          实时监控视频展示
        </span>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    <!-- 控制面板/工具栏 -->

    <el-row type="flex" justify="start" style="margin-bottom: 20px;">
      <el-button type="primary" icon="el-icon-view" @click="show = !show">查看汇总信息</el-button>
      <el-button type="primary" icon="el-icon-video-camera" @click="pause">暂停所有视频</el-button>
      <el-button type="primary" icon="el-icon-picture" @click="takePicture">截图</el-button>
      <el-button type="primary" icon="el-icon-s-grid" @click="changeLayout">切换布局模式</el-button>
    </el-row>
    <!-- 监控点位统计信息 -->
    <transition name="el-zoom-in-center">
      <el-row type="flex" justify="space-around" style="margin-bottom: 20px;" v-show="show">
        <el-col :span="6">
          <el-card>
            <div style="text-align: center;">
              <h3>总监控点位</h3>
              <p>6</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="text-align: center;">
              <h3>在线监控</h3>
              <p>6</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div style="text-align: center;">
              <h3>离线监控</h3>
              <p>0</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </transition>

    <!-- Grid layout with 3 columns per row -->
    <!-- <el-button type="text" @click="getNavigator">点击按钮</el-button>授予摄像头权限查看页面效果 -->
    <div class="grid-container">
      <!-- Loop to generate 6 el-card components -->
      <el-card class="box-card" v-for="(item, index) in 6" :key="index">
        <div slot="header" class="clearfix" style="text-align: center;font-weight: bold;">
          <span>监控视频点位{{ index + 1 }}</span>
          <el-tag v-if="isOnline" type="success" style="float: right;">在线</el-tag>
          <el-tag v-else type="danger" style="float: right;">离线</el-tag>
        </div>
        <div class="text item">
          <div>
            <video v-if="hasCamera" ref="videos" autoplay playsinline muted class="video-feed"></video>
            <!-- Message to display if no camera is available -->
            <el-image v-else style="width: 100%; height: 100%" :src="altImg" fit="fit"></el-image>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dataaccess",
  data() {
    return {
      show: false,
      isOnline: true,
      hasCamera: false,
      altImg: process.env.VUE_APP_BASE_API + '/profile/images/dataaccess/a1.png',
    };
  },
  mounted() {
    // Attempt to access the user's camera

  },
  methods: {
    getNavigator() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((stream) => {
          this.hasCamera = true;
          // Wait for the DOM to update
          this.$nextTick(() => {
            // Assign the camera stream to each video element
            this.$refs.videos.forEach((video) => {
              video.srcObject = stream;
            });
          });
        })
        .catch((error) => {
          console.error("Error accessing camera:", error);
          this.hasCamera = false;
        });
    },
    pause() {
      this.$modal.msgSuccess("开发中");
    },
    takePicture() {
      this.$modal.msgSuccess("开发中");
    },
    changeLayout() {
      this.$modal.msgSuccess("开发中");
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.box-card {
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}

.video-feed {
  width: 100%;
  height: auto;
}
</style>
